<!-- 话务量 -->
<template>
  <v-chart
      ref="chartRef"
      :update-options="updateOptions"
      :option='option'
      autoresize
  />
</template>
<script setup>
import {GaugeChart, PieChart} from 'echarts/charts';
import linearGradient from '../../utils/linearGradient.js';
import {GraphicComponent} from 'echarts/components';
import * as echarts from 'echarts/core';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted, ref, shallowRef, watch} from 'vue';
const updateOptions = ref({
  replaceMerge: ['series'],
  lazyUpdate: false,
  notMerge: false
})
const chartRef = shallowRef(null)
const props = defineProps(['defaultValue', 'attrName'])
echarts.use([
  GraphicComponent,
  GaugeChart,
  PieChart,
  CanvasRenderer
])

// #00e1ef
const option = ref({
  series: [
	  {
		  type: 'gauge',
		  id: 'gaugeSeries',
		  animation: true, // 启用动画
		  startAngle: 90,
		  endAngle: -270,
		  center: ['50%', '50%'],
		  radius: '85%',
		  min: 0,
		  max: 1,
		  axisLine: {
			  show: false,
			  lineStyle: {
				  width: 8,
				  color: []
			  }
		  },
		  pointer: {
			  icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
			  length: '8%',
			  width: 12,
			  offsetCenter: [0, '-53%'],
			  itemStyle: {
				  color: '#00e1ef'
			  }
		  },
		  axisTick: {
			  length: 18,
			  lineStyle: {
				  color: 'auto',
				  width: 6
			  }
		  },
		  splitLine: {
			  show: false
		  },
		  axisLabel: {
			  show: false
		  },
		  detail: {
			  show: true,
			  fontSize: 30,
			  offsetCenter: [0, '-10%'],
			  valueAnimation: true,
			  formatter: function (value) {
				  return Math.round(value * 100) + '%';
			  },
			  color: '#ffffff'
		  },
		  title: {
			  color: '#ffffff',
			  fontSize: 18
		  },
		  data: [
			  {
				  value: 0.5,
				  name: '10:00'
			  }
		  ]
	  },
    {
      type: 'pie',
	    id: 'pieSeriesOne',
      radius: ['77%', '80%'],
      label: {
        show: false
      },
      emphasis: {
        disabled: true
      },
      avoidLabelOverlap: false,
      data: [
	      { value: 100,
		      name: 'Search Engine',
		      itemStyle: {
			      color: '#00e1ef',
		      }
	      }
      ]
    },
    {
      type: 'pie',
	    id: 'pieSeriesTwo',
      radius: ['55%', '57%'],
      label: {
        show: false
      },
      emphasis: {
        disabled: true
      },
      avoidLabelOverlap: false,
      data: [
        { value: 100,
          name: 'Search Engine',
          itemStyle: {
            color: 'rgba(0, 225, 239, 0.3)'
          }
        }
      ]
    },
  ]
})
onMounted(() => {
})
watch(() => props.defaultValue, (newValue) => {
  if (newValue[props.attrName] > 0) {
    option.value.series[0].axisLine.lineStyle.color = linearGradient(newValue[props.attrName])
    option.value.series[0].data[0].value = newValue[props.attrName]
    option.value.series[0].data[0].name = newValue.time
  } else {
    option.value.series[0].axisLine.lineStyle.color = linearGradient(0)
    option.value.series[0].data[0].value = newValue[props.attrName]
    option.value.series[0].data[0].name = newValue.time
  }
  chartRef.value.setOption(option.value)
}, {deep: true})
function handleColors (count) {

}
// 提取线性渐变色值的函数（针对动态配置情况）
// function extractDynamicGradientColors(option, seriesIndex = 0, axisLineIndex = 0) {
// 	var series = option.series[seriesIndex];
// 	if (series && series.axisLine && series.axisLine.lineStyle && series.axisLine.lineStyle.color) {
// 		var colorConfig = series.axisLine.lineStyle.color;
// 		if (typeof colorConfig === 'function') {
// 			// 调用函数获取实际的线性渐变配置对象
// 			var actualColorConfig = colorConfig();
// 			if (actualColorConfig && actualColorConfig.type === 'linear') {
// 				return actualColorConfig.colorStops.map(stop => stop.color);
// 			}
// 		} else if (colorConfig.type === 'linear') {
// 			return colorConfig.colorStops.map(stop => stop.color);
// 		}
// 	}
// 	return [];
// }
//
// const gradientColors = extractDynamicGradientColors(option);
// console.log(gradientColors);
</script>
